import { FC } from "react";
import HeadPanel from "./HeadPanel";
import LeftPanel from "./LeftPanel";
import MiddlePanel from "./MiddlePanel";
import RightPanel from "./RightPanel";
import style from './index.module.scss'
import classnames from 'classnames/bind'
import useLoadQuestion from "../../hooks/useloadQuestion";
import { Spin } from "antd";
import { useDispatch } from "react-redux";
import { setSelectedId } from "../../store/ComponentReducer";
import useBindKeyPress from "../../hooks/useBindKeyPress";

const CBN = classnames.bind(style)


const EditPages:FC = () => {
    const dispatch = useDispatch()
    useBindKeyPress()
    const cancelSelectedId = ()=>{
        dispatch(setSelectedId(''))
    }
    const { loading } = useLoadQuestion()
    return <div className={CBN('EditPages')}>
        <div className={CBN('Head')}>
            <HeadPanel></HeadPanel>
        </div>
        <div className={CBN('Container')}>
            <div className={CBN('Left')}>
                <LeftPanel></LeftPanel>
            </div>
            <div className={CBN('Middle')} onClick ={()=>{cancelSelectedId()}}>
                <div className={CBN('CanvasWrapper')}>
                    {loading ? <Spin></Spin> : <MiddlePanel></MiddlePanel>}
                </div>
            </div>
            <div className={CBN('Right')}>
                <RightPanel></RightPanel>
            </div>
        </div>
    </div>
}

export default EditPages